<template>
  <!-- 页面标题 -->
  <div class="page-header">
    <h1 class="page-title">
      <i class="header-icon">⚠️</i>
      异常数据管理
    </h1>
    <p class="page-description">数据异常处理、统计分析和批量操作管理</p>
  </div>

  <!-- 统计卡片 -->
  <div class="stats-grid">
    <div class="stat-card">
      <div class="stat-icon">🔍</div>
      <div class="stat-content">
        <h3>{{ statistics.typeStatistics?.formatError || 0 }}</h3>
        <p>格式错误</p>
      </div>
    </div>
    <div class="stat-card">
      <div class="stat-icon">📝</div>
      <div class="stat-content">
        <h3>{{ statistics.typeStatistics?.fieldMissing || 0 }}</h3>
        <p>字段缺失</p>
      </div>
    </div>
    <div class="stat-card">
      <div class="stat-icon">⚡</div>
      <div class="stat-content">
        <h3>{{ statistics.typeStatistics?.logicConflict || 0 }}</h3>
        <p>逻辑冲突</p>
      </div>
    </div>
    <div class="stat-card">
      <div class="stat-icon">⏳</div>
      <div class="stat-content">
        <h3>{{ statistics.statusStatistics?.unhandled || 0 }}</h3>
        <p>待处理</p>
      </div>
    </div>
  </div>

  <!-- 功能选项卡 -->
  <div class="tab-container">
    <div class="tab-nav">
      <button 
        v-for="tab in tabs" 
        :key="tab.key"
        :class="['tab-btn', { active: activeTab === tab.key }]"
        @click="switchTab(tab.key)"
      >
        <i :class="tab.icon"></i>
        {{ tab.label }}
      </button>
    </div>
  </div>

  <!-- 异常数据列表 -->
  <div v-if="activeTab === 'list'" class="tab-content">
    <div class="list-card">
      <div class="card-header">
        <h3>异常数据列表</h3>
        <div class="header-actions">
          <button @click="refreshExceptionList" class="btn btn-secondary">
            <i class="refresh-icon">🔄</i>
            刷新
          </button>
        </div>
      </div>

      <!-- 筛选条件 -->
      <div class="filter-bar">
        <div class="filter-group">
          <label>异常类型：</label>
          <select v-model="filters.exceptionType" @change="loadExceptionList">
            <option value="">全部类型</option>
            <option value="1">格式错误</option>
            <option value="2">字段缺失</option>
            <option value="3">逻辑冲突</option>
          </select>
        </div>
        <div class="filter-group">
          <label>处理状态：</label>
          <select v-model="filters.handleStatus" @change="loadExceptionList">
            <option value="">全部状态</option>
            <option value="1">未处理</option>
            <option value="2">已修复</option>
            <option value="3">忽略</option>
          </select>
        </div>
      </div>

      <!-- 数据表格 -->
      <div class="data-table">
        <table>
          <thead>
            <tr>
              <th>选择</th>
              <th>异常ID</th>
              <th>采集ID</th>
              <th>异常类型</th>
              <th>异常描述</th>
              <th>处理状态</th>
              <th>处理时间</th>
              <th>关联数据</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in exceptionList" :key="item.exception.id">
              <td>
                <input 
                  type="checkbox" 
                  :value="item.exception.id" 
                  v-model="selectedItems"
                >
              </td>
              <td>{{ item.exception.id }}</td>
              <td>{{ item.exception.collectionId }}</td>
              <td>
                <span :class="['exception-type-tag', getExceptionTypeClass(item.exception.exceptionType)]">
                  {{ getExceptionTypeText(item.exception.exceptionType) }}
                </span>
              </td>
              <td class="description">{{ item.exception.exceptionDesc }}</td>
              <td>
                <span :class="['status-tag', getStatusClass(item.exception.handleStatus)]">
                  {{ getStatusText(item.exception.handleStatus) }}
                </span>
              </td>
              <td>{{ formatDateTime(item.exception.handleTime) }}</td>
              <td>
                <div v-if="item.collection" class="collection-info">
                  <div>报关单: {{ item.collection.declareNo }}</div>
                  <div>项号: {{ item.collection.itemNo }}</div>
                </div>
                <span v-else class="no-data">无关联数据</span>
              </td>
              <td>
                <div class="action-buttons">
                  <button 
                    @click="viewExceptionDetail(item.exception.id)" 
                    class="btn btn-sm btn-info"
                  >
                    详情
                  </button>
                  <button 
                    v-if="item.exception.handleStatus === 1"
                    @click="handleException(item.exception.id, 2)" 
                    class="btn btn-sm btn-success"
                    :disabled="processingIds.includes(item.exception.id)"
                  >
                    修复
                  </button>
                  <button 
                    v-if="item.exception.handleStatus === 1"
                    @click="handleException(item.exception.id, 3)" 
                    class="btn btn-sm btn-warning"
                    :disabled="processingIds.includes(item.exception.id)"
                  >
                    忽略
                  </button>
                </div>
              </td>
            </tr>
            <tr v-if="exceptionList.length === 0">
              <td colspan="9" class="no-data">暂无异常数据</td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 批量操作 -->
      <div class="batch-actions" v-if="selectedItems.length > 0">
        <span class="selected-count">已选择 {{ selectedItems.length }} 项</span>
        <div class="batch-buttons">
          <button @click="batchHandleException(2)" class="btn btn-success" :disabled="batchProcessing">
            <i v-if="batchProcessing" class="loading-icon">⏳</i>
            批量修复
          </button>
          <button @click="batchHandleException(3)" class="btn btn-warning" :disabled="batchProcessing">
            <i v-if="batchProcessing" class="loading-icon">⏳</i>
            批量忽略
          </button>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination" v-if="exceptionList.length > 0">
        <button 
          @click="changePage(currentPage - 1)" 
          :disabled="currentPage <= 1"
          class="btn btn-secondary"
        >
          上一页
        </button>
        <span class="page-info">第 {{ currentPage }} 页</span>
        <button 
          @click="changePage(currentPage + 1)" 
          :disabled="exceptionList.length < pageSize"
          class="btn btn-secondary"
        >
          下一页
        </button>
      </div>
    </div>
  </div>

  <!-- 创建异常记录 -->
  <div v-if="activeTab === 'create'" class="tab-content">
    <div class="form-card">
      <div class="card-header">
        <h3>创建异常记录</h3>
        <p>手动标记数据异常并记录详细信息</p>
      </div>
      <form @submit.prevent="createException" class="exception-form">
        <div class="form-row">
          <div class="form-group">
            <label>关联采集ID <span class="required">*</span></label>
            <input 
              type="number" 
              v-model.number="exceptionForm.collectionId" 
              placeholder="请输入采集数据ID"
              required
            >
          </div>
          <div class="form-group">
            <label>异常类型 <span class="required">*</span></label>
            <select v-model="exceptionForm.exceptionType" required>
              <option value="">请选择异常类型</option>
              <option value="1">格式错误</option>
              <option value="2">字段缺失</option>
              <option value="3">逻辑冲突</option>
            </select>
          </div>
        </div>
        
        <div class="form-group">
          <label>异常描述 <span class="required">*</span></label>
          <textarea 
            v-model="exceptionForm.exceptionDesc" 
            placeholder="请详细描述异常情况"
            rows="4"
            required
          ></textarea>
        </div>

        <div class="form-actions">
          <button type="button" @click="resetExceptionForm" class="btn btn-secondary">
            重置
          </button>
          <button type="submit" class="btn btn-primary" :disabled="creating">
            <i v-if="creating" class="loading-icon">⏳</i>
            {{ creating ? '创建中...' : '创建异常记录' }}
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- 异常详情弹窗 -->
  <div v-if="showDetailModal" class="modal-overlay" @click="closeDetailModal">
    <div class="modal-content" @click.stop>
      <div class="modal-header">
        <h3>异常详情</h3>
        <button @click="closeDetailModal" class="close-btn">✕</button>
      </div>
      <div class="modal-body" v-if="exceptionDetail">
        <div class="detail-section">
          <h4>异常信息</h4>
          <div class="detail-grid">
            <div class="detail-item">
              <label>异常ID:</label>
              <span>{{ exceptionDetail.exception.id }}</span>
            </div>
            <div class="detail-item">
              <label>异常类型:</label>
              <span :class="['exception-type-tag', getExceptionTypeClass(exceptionDetail.exception.exceptionType)]">
                {{ getExceptionTypeText(exceptionDetail.exception.exceptionType) }}
              </span>
            </div>
            <div class="detail-item">
              <label>处理状态:</label>
              <span :class="['status-tag', getStatusClass(exceptionDetail.exception.handleStatus)]">
                {{ getStatusText(exceptionDetail.exception.handleStatus) }}
              </span>
            </div>
            <div class="detail-item">
              <label>处理时间:</label>
              <span>{{ formatDateTime(exceptionDetail.exception.handleTime) || '未处理' }}</span>
            </div>
          </div>
          <div class="detail-item full-width">
            <label>异常描述:</label>
            <p class="description-text">{{ exceptionDetail.exception.exceptionDesc }}</p>
          </div>
        </div>
        
        <div class="detail-section" v-if="exceptionDetail.collection">
          <h4>关联数据</h4>
          <div class="detail-grid">
            <div class="detail-item">
              <label>采集ID:</label>
              <span>{{ exceptionDetail.collection.id }}</span>
            </div>
            <div class="detail-item">
              <label>报关单号:</label>
              <span>{{ exceptionDetail.collection.declareNo }}</span>
            </div>
            <div class="detail-item">
              <label>项号:</label>
              <span>{{ exceptionDetail.collection.itemNo }}</span>
            </div>
            <div class="detail-item">
              <label>关区:</label>
              <span>{{ exceptionDetail.collection.customsArea }}</span>
            </div>
            <div class="detail-item">
              <label>人民币金额:</label>
              <span class="amount">¥{{ formatAmount(exceptionDetail.collection.amountCny) }}</span>
            </div>
            <div class="detail-item">
              <label>美元金额:</label>
              <span class="amount">${{ formatAmount(exceptionDetail.collection.amountUsd) }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button @click="closeDetailModal" class="btn btn-secondary">关闭</button>
      </div>
    </div>
  </div>

  <!-- 消息提示 -->
  <div v-if="message.show" :class="['message-toast', message.type]">
    <i :class="getMessageIcon(message.type)"></i>
    {{ message.text }}
  </div>
</template>

<script>
import { dataExceptionApi } from '@/assets/api/dataCollection.js'

export default {
  name: 'ExceptionManagement',
  data() {
    return {
      activeTab: 'list',
      tabs: [
        { key: 'list', label: '异常列表', icon: '📋' },
        { key: 'create', label: '创建异常', icon: '➕' }
      ],
      
      // 筛选条件
      filters: {
        exceptionType: '',
        handleStatus: ''
      },
      
      // 异常表单
      exceptionForm: {
        collectionId: null,
        exceptionType: '',
        exceptionDesc: ''
      },
      
      // 数据
      exceptionList: [],
      statistics: {},
      selectedItems: [],
      exceptionDetail: null,
      
      // 状态控制
      creating: false,
      batchProcessing: false,
      processingIds: [],
      showDetailModal: false,
      
      // 分页
      currentPage: 1,
      pageSize: 10,
      
      // 消息提示
      message: {
        show: false,
        type: 'success',
        text: ''
      }
    }
  },
  
  mounted() {
    this.loadStatistics()
    this.loadExceptionList()
  },
  
  methods: {
    // 切换选项卡
    switchTab(tab) {
      this.activeTab = tab
      if (tab === 'list') {
        this.loadExceptionList()
      }
    },
    
    // 加载统计数据
    async loadStatistics() {
      try {
        const response = await dataExceptionApi.getExceptionStatistics()
        console.log('统计数据响应:', response)
        
        if (response && response.data && response.data.code === 200) {
          // 数据在response.data.data中
          this.statistics = response.data.data || {}
        } else {
          this.statistics = {}
        }
      } catch (error) {
        console.error('加载统计数据失败:', error)
        this.statistics = {}
      }
    },
    
    // 加载异常数据列表
    async loadExceptionList() {
      try {
        const params = {
          page: this.currentPage,
          size: this.pageSize,
          ...this.filters
        }
        
        const response = await dataExceptionApi.getExceptionList(params)
        console.log('异常数据响应:', response)
        
        if (response && response.data && response.data.code === 200) {
          // 数据在response.data.data中
          if (Array.isArray(response.data.data)) {
            this.exceptionList = response.data.data
          } else if (response.data.data && Array.isArray(response.data.data.records)) {
            this.exceptionList = response.data.data.records
          } else {
            this.exceptionList = []
          }
          console.log('异常数据加载成功，数量:', this.exceptionList.length)
        } else {
          this.exceptionList = []
          this.showMessage('warning', response?.data?.message || '异常数据加载失败')
        }
      } catch (error) {
        console.error('加载异常数据失败:', error)
        this.exceptionList = []
        this.showMessage('error', '加载异常数据失败')
      }
    },
    
    // 刷新异常列表
    refreshExceptionList() {
      this.currentPage = 1
      this.selectedItems = []
      this.loadExceptionList()
      this.loadStatistics()
    },
    
    // 创建异常记录
    async createException() {
      this.creating = true
      try {
        const response = await dataExceptionApi.createException(this.exceptionForm)
        console.log('创建异常响应:', response)
        
        if (response && response.data && response.data.code === 200) {
          this.showMessage('success', '异常记录创建成功')
          this.resetExceptionForm()
          this.loadStatistics()
          if (this.activeTab === 'list') {
            this.loadExceptionList()
          }
        } else {
          this.showMessage('error', response?.data?.message || '异常记录创建失败')
        }
      } catch (error) {
        console.error('创建异常失败:', error)
        this.showMessage('error', '系统异常，请稍后重试')
      } finally {
        this.creating = false
      }
    },
    
    // 处理单个异常
    async handleException(exceptionId, handleStatus) {
      this.processingIds.push(exceptionId)
      try {
        const response = await dataExceptionApi.handleException({
          exceptionId: exceptionId,
          handleStatus: handleStatus,
          userId: 1, // 临时设置
          handleRemark: handleStatus === 2 ? '已修复' : '已忽略'
        })
        
        if (response && response.data && response.data.code === 200) {
          this.showMessage('success', '异常处理成功')
          this.loadExceptionList()
          this.loadStatistics()
        } else {
          this.showMessage('error', response?.data?.message || '异常处理失败')
        }
      } catch (error) {
        console.error('处理异常失败:', error)
        this.showMessage('error', '系统异常，请稍后重试')
      } finally {
        this.processingIds = this.processingIds.filter(id => id !== exceptionId)
      }
    },
    
    // 批量处理异常
    async batchHandleException(handleStatus) {
      if (this.selectedItems.length === 0) {
        this.showMessage('warning', '请选择要处理的异常数据')
        return
      }
      
      this.batchProcessing = true
      try {
        const response = await dataExceptionApi.batchHandleException({
          exceptionIds: this.selectedItems,
          handleStatus: handleStatus,
          userId: 1
        })
        
        if (response && response.data && response.data.code === 200) {
          this.showMessage('success', response.data.message || '批量处理成功')
          this.selectedItems = []
          this.loadExceptionList()
          this.loadStatistics()
        } else {
          this.showMessage('error', response?.data?.message || '批量处理失败')
        }
      } catch (error) {
        console.error('批量处理异常失败:', error)
        this.showMessage('error', '系统异常，请稍后重试')
      } finally {
        this.batchProcessing = false
      }
    },
    
    // 查看异常详情
    async viewExceptionDetail(id) {
      try {
        const response = await dataExceptionApi.getExceptionDetail(id)
        console.log('异常详情响应:', response)
        
        if (response && response.data && response.data.code === 200) {
          this.exceptionDetail = response.data.data
          this.showDetailModal = true
        } else {
          this.showMessage('error', response?.data?.message || '获取异常详情失败')
        }
      } catch (error) {
        console.error('获取异常详情失败:', error)
        this.showMessage('error', '系统异常，请稍后重试')
      }
    },
    
    // 关闭详情弹窗
    closeDetailModal() {
      this.showDetailModal = false
      this.exceptionDetail = null
    },
    
    // 重置异常表单
    resetExceptionForm() {
      this.exceptionForm = {
        collectionId: null,
        exceptionType: '',
        exceptionDesc: ''
      }
    },
    
    // 分页切换
    changePage(page) {
      if (page >= 1) {
        this.currentPage = page
        this.loadExceptionList()
      }
    },
    
    // 工具方法
    getExceptionTypeText(type) {
      const types = {
        1: '格式错误',
        2: '字段缺失',
        3: '逻辑冲突'
      }
      return types[type] || '未知'
    },
    
    getExceptionTypeClass(type) {
      const classes = {
        1: 'format-error',
        2: 'field-missing',
        3: 'logic-conflict'
      }
      return classes[type] || ''
    },
    
    getStatusText(status) {
      const statuses = {
        1: '未处理',
        2: '已修复',
        3: '忽略'
      }
      return statuses[status] || '未知'
    },
    
    getStatusClass(status) {
      const classes = {
        1: 'unhandled',
        2: 'fixed',
        3: 'ignored'
      }
      return classes[status] || ''
    },
    
    formatAmount(amount) {
      return amount ? amount.toLocaleString() : '0.00'
    },
    
    formatDateTime(dateTime) {
      if (!dateTime) return ''
      return new Date(dateTime).toLocaleString('zh-CN')
    },
    
    getMessageIcon(type) {
      const icons = {
        success: '✅',
        error: '❌',
        warning: '⚠️',
        info: 'ℹ️'
      }
      return icons[type] || 'ℹ️'
    },
    
    showMessage(type, text) {
      this.message = { show: true, type, text }
      setTimeout(() => {
        this.message.show = false
      }, 3000)
    }
  }
}
</script>

<style scoped>
.exception-management-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

/* 页面标题 */
.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 30px;
  border-radius: 12px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
}

.page-title {
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-icon {
  font-size: 32px;
}

.page-description {
  font-size: 16px;
  opacity: 0.9;
  margin: 0;
}

/* 统计卡片 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.stat-icon {
  font-size: 32px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
}

.stat-content h3 {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 4px 0;
  color: #2c3e50;
}

.stat-content p {
  font-size: 14px;
  color: #7f8c8d;
  margin: 0;
}

/* 选项卡 */
.tab-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
  overflow: hidden;
}

.tab-nav {
  display: flex;
  border-bottom: 1px solid #e9ecef;
}

.tab-btn {
  flex: 1;
  padding: 16px 24px;
  background: none;
  border: none;
  font-size: 16px;
  font-weight: 500;
  color: #6c757d;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.tab-btn:hover {
  background: #f8f9fa;
  color: #495057;
}

.tab-btn.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

/* 内容区域 */
.tab-content {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.list-card, .form-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card-header {
  padding: 24px;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
}

.card-header p {
  color: #6c757d;
  margin: 4px 0 0 0;
  font-size: 14px;
}

.header-actions {
  display: flex;
  gap: 12px;
}

/* 筛选条件 */
.filter-bar {
  padding: 20px 24px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-group label {
  font-weight: 500;
  color: #495057;
  white-space: nowrap;
}

.filter-group select {
  padding: 8px 12px;
  border: 1px solid #ced4da;
  border-radius: 6px;
  font-size: 14px;
  min-width: 120px;
}

/* 数据表格 */
.data-table {
  overflow-x: auto;
}

.data-table table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  background: #f8f9fa;
  padding: 16px 12px;
  text-align: left;
  font-weight: 600;
  color: #495057;
  border-bottom: 2px solid #e9ecef;
  white-space: nowrap;
}

.data-table td {
  padding: 16px 12px;
  border-bottom: 1px solid #e9ecef;
  vertical-align: top;
}

.data-table tr:hover {
  background: #f8f9fa;
}

.description {
  max-width: 200px;
  word-break: break-word;
}

.collection-info {
  font-size: 13px;
  color: #6c757d;
}

.collection-info div {
  margin-bottom: 2px;
}

.no-data {
  text-align: center;
  color: #6c757d;
  font-style: italic;
}

/* 标签样式 */
.exception-type-tag, .status-tag {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.exception-type-tag.format-error {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeaa7;
}

.exception-type-tag.field-missing {
  background: #d1ecf1;
  color: #0c5460;
  border: 1px solid #bee5eb;
}

.exception-type-tag.logic-conflict {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.status-tag.unhandled {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeaa7;
}

.status-tag.fixed {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.status-tag.ignored {
  background: #e2e3e5;
  color: #383d41;
  border: 1px solid #d6d8db;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-secondary:hover:not(:disabled) {
  background: #545b62;
}

.btn-success {
  background: #28a745;
  color: white;
}

.btn-success:hover:not(:disabled) {
  background: #218838;
}

.btn-warning {
  background: #ffc107;
  color: #212529;
}

.btn-warning:hover:not(:disabled) {
  background: #e0a800;
}

.btn-info {
  background: #17a2b8;
  color: white;
}

.btn-info:hover:not(:disabled) {
  background: #138496;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

/* 批量操作 */
.batch-actions {
  padding: 16px 24px;
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.selected-count {
  font-weight: 500;
  color: #495057;
}

.batch-buttons {
  display: flex;
  gap: 12px;
}

/* 分页 */
.pagination {
  padding: 20px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  border-top: 1px solid #e9ecef;
}

.page-info {
  font-weight: 500;
  color: #495057;
}

/* 表单样式 */
.exception-form {
  padding: 24px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group label {
  font-weight: 500;
  color: #495057;
}

.required {
  color: #dc3545;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px;
  border: 1px solid #ced4da;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e9ecef;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-header {
  padding: 24px;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: #6c757d;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
}

.close-btn:hover {
  background: #f8f9fa;
  color: #495057;
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #e9ecef;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 详情样式 */
.detail-section {
  margin-bottom: 32px;
}

.detail-section:last-child {
  margin-bottom: 0;
}

.detail-section h4 {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #e9ecef;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-item.full-width {
  grid-column: 1 / -1;
}

.detail-item label {
  font-weight: 500;
  color: #6c757d;
  font-size: 13px;
}

.detail-item span {
  color: #2c3e50;
  font-weight: 500;
}

.description-text {
  background: #f8f9fa;
  padding: 12px;
  border-radius: 6px;
  margin: 8px 0 0 0;
  line-height: 1.5;
  color: #495057;
}

.amount {
  font-family: 'Courier New', monospace;
  font-weight: 600;
}

/* 消息提示 */
.message-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 16px 20px;
  border-radius: 8px;
  color: white;
  font-weight: 500;
  z-index: 1001;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: slideIn 0.3s ease-out;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.message-toast.success {
  background: #28a745;
}

.message-toast.error {
  background: #dc3545;
}

.message-toast.warning {
  background: #ffc107;
  color: #212529;
}

.message-toast.info {
  background: #17a2b8;
}

/* 加载图标 */
.loading-icon, .refresh-icon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .exception-management-container {
    padding: 16px;
  }
  
  .page-header {
    padding: 20px;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .tab-nav {
    flex-direction: column;
  }
  
  .filter-bar {
    flex-direction: column;
    gap: 16px;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .batch-actions {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .batch-buttons {
    justify-content: center;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .detail-grid {
    grid-template-columns: 1fr;
  }
  
  .modal-content {
    margin: 10px;
    max-height: calc(100vh - 20px);
  }
  
  .data-table {
    font-size: 13px;
  }
  
  .data-table th,
  .data-table td {
    padding: 8px 6px;
  }
}

@media (max-width: 480px) {
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .header-actions {
    width: 100%;
    justify-content: flex-end;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .pagination {
    flex-direction: column;
    gap: 8px;
  }
}
</style>
